<template>
	<view class="login">
		<view class="title">
			<view class="text">
				<view>注册</view>
				<text>欢迎使用心爱健康</text>
			</view>
			<image src="@/static/login.png"></image>
			<view class="form">
				<view class="content">
					<view class="label">真实姓名</view>
					<view class="input">
						<input placeholder="请输入真实姓名" v-model="form.realName" />
					</view>
				</view>
				<view class="content">
					<view class="label">性别</view>
					<view class="input">
						<uni-data-checkbox v-model="form.sex" :localdata="sex"></uni-data-checkbox>
					</view>
				</view>
				<view class="content">
					<view class="label">出生年月</view>
					<view class="input" style="width: 100%">
						<uni-datetime-picker :end="time" v-model="form.birthday" :border="false" type="date"
							placeholder="请选择出生年月" />
					</view>
				</view>
				<view class="content">
					<view class="label">手机号码</view>
					<view class="input">
						<input placeholder="请输入手机号码" v-model="form.account" type="number" maxlength="11" />
					</view>
				</view>
				<view class="content">
					<view class="label">验证码</view>
					<view class="input">
						<input placeholder="请输入验证码" v-model="form.captcha" type="number" maxlength="6" />
					</view>
					<view class="captcha" @click="code" :disabled="countdown > 0">
						{{ text }}
					</view>
				</view>
				<view class="content">
					<view class="label">密码</view>
					<view class="input">
						<input placeholder="请输入密码" type="password" v-model="form.password" maxlength="16" />
					</view>
				</view>
				<view class="content">
					<view class="label">确认密码</view>
					<view class="input">
						<input placeholder="请再次输入密码" type="password" v-model="form.rePassword" maxlength="16" />
					</view>
				</view>
				<view class="content">
					<view class="label">邀请码</view>
					<view class="input">
						<input disabled :value="form.inviteCode" placeholder="邀请码" />
					</view>
				</view>
				<view class="btn">
					<view>
						<button type="primary" @click="sumbit" :loading="isLoading">注册</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { register, registerVerify } from '@/api/logon';
	const queryParams = new URLSearchParams(window.location.search);

	const isLoading = ref(false);
	const form = reactive({
		sex: 0,
		inviteCode: queryParams.get('inviteCode'),
	});
	const resetForm = () => {
		for (let key in form) {
			form[key] = null;
			if (key == 'sex') {
				form[key] = 0;
			}
		}
	};
	const sumbit = () => {
		if (isLoading.value === true) {
			uni.showToast({
				title: '注册中...',
				icon: 'none',
			});
			return;
		}
		if (!form.inviteCode) {
			uni.showToast({
				title: '邀请链接无效',
				icon: 'none',
			});
			return;
		}
		if (!form.realName) {
			uni.showToast({
				title: '请输入真实姓名',
				icon: 'none',
			});
			return;
		}
		if (!form.birthday) {
			uni.showToast({
				title: '请选择出生年月',
				icon: 'none',
			});
			return;
		}
		if (!form.account) {
			uni.showToast({
				title: '请输入手机号码',
				icon: 'none',
			});
			return;
		}
		if (!form.captcha) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none',
			});
			return;
		}
		if (!form.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
			});
			return;
		}
		if (!form.rePassword || form.password != form.rePassword) {
			uni.showToast({
				title: '密码不一致',
				icon: 'none',
			});
			return;
		}
		isLoading.value = true;
		console.log(form);
		register(form)
			.then((res) => {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1500,
				});
				resetForm();
				isLoading.value = false;
				setTimeout(() => {
					window.location.replace('https://fir.xcxwo.com/8jxun5'); // 跳转至下载页面
				}, 1500)
			})
			.catch((err) => {
				uni.showToast({
					title: err.msg || err.response.data.msg || err.response.data.message || '注册失败',
					icon: 'none',
					duration: 2000,
				});
				isLoading.value = false;
			});
	};
	const countdown = ref(0);
	const text = ref('获取');
	const sex = reactive([
		{
			text: '男',
			value: 0,
		},
		{
			text: '女',
			value: 1,
		},
	]);
	const code = async () => {
		if (countdown.value > 0) return;
		if (!form.account) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
			});
			return;
		}
		countdown.value = 60;
		const timer = setInterval(() => {
			if (countdown.value <= 0) {
				text.value = '获取';
				clearInterval(timer); // 清除计时器
				return;
			}
			countdown.value--;
			text.value = `${countdown.value}`;
		}, 1000);
		registerVerify({
			phone: form.account,
			type: 'register',
		})
			.then((res) => {
				if (res.status === 500) {
					countdown.value = 0;
					clearInterval(timer); // 清除计时器
				}
				uni.showToast({
					title: res.data || res.msg,
					icon: 'none',
					duration: 2000,
				});
			})
			.catch((err) => {
				uni.showToast({
					title: '系统繁忙',
					icon: 'none',
					duration: 2000,
				});
			});
	};
	const time = ref();
	const getTime = () => {
		const currentDate = new Date();
		const year = currentDate.getFullYear(); // 获取四位数的年份，如：2023
		const month = currentDate.getMonth() + 1; // 获取月份，注意要加 1，因为返回值范围是 0-11
		const day = currentDate.getDate(); // 获取日期
		time.value = `${year}-${month}-${day}`;
	};
	onMounted(() => {
		getTime();
	});
</script>

<style lang="scss" scoped>
	@import './register.scss';
</style>